<template>
	<view class="coantainer">
		<view class="flexBox">
			<view :class="status == item.value?'statusItem active':'statusItem'" v-for="item in statusList"
				:key="item.title" @click="status = item.value">
				{{item.title}}
			</view>
		</view>
		<!-- 实名认证 -->
		<div v-if="status==0">
			<RealName></RealName>
		</div>
		<!-- 商铺认证 -->
		<div v-else>
			<RealShop></RealShop>
		</div>
	</view>
</template>

<script>
	import RealName from './RealName.vue'
	import RealShop from './RealShop.vue'
	export default{
		components:{
			RealName,
			RealShop
		},
		data(){
			return{
				status: 0,
				statusList: [{
						value: '0',
						title: '实名认证'
					}, {
						value: '1',
						title: '商铺认证'
					},
				]
				
			}
		},
		onLoad() {
			
		},
		methods:{
			
		}
	}
</script>

<style lang="scss" scoped>
	.coantainer{
		.flexBox {
			view {
				flex: 1;
			}
			
		}
		.statusItem {
			text-align: center;
			// border: 1px solid #dedeed;
			box-sizing: border-box;
			padding: 5px;
			background-color: #fff;
			color: #888;
		
			&:active {
				background-color: #2979ff;
				color: #fff;
				font-weight: 600;
			}
		}
		
		
		.active {
			background-color: #2979ff;
			color: #fff;
			font-weight: 600;
		}
	}
</style>